<template>
  <div class="person_info">
    <nav_bar title='个人资料' background='#fff' :back="true"  @back="handlerGobackClick"></nav_bar>
    <div class="header">
      <img :src="photo_url" mode="aspectFill">
      <div>{{real_name}}</div>
    </div>
    <div class="person_data">
      <div class="item">
        <label>昵称</label>
        <input type="text" placeholder="请输入用户昵称" v-model="nickname">
      </div>
      <div class="item">
        <label>用户姓名</label>
        <input type="text" placeholder="请输入用户姓名" v-model="realName">
      </div>
      <div class="item">
        <label>公司名称</label>
        <input type="text" placeholder="请输入公司名称" v-model="companyName">
      </div>
      <div class="item">
        <label>单位类型</label>
        <picker
          @change="selectCompany"
          :value="companyType_index"
          :range="companyType_data">
          <input type="text" disabled="disabled" placeholder="请选择" v-model="companyType_input">
        </picker>
      </div>
    </div>
    <button @click="saveData" class="btn_save" style="width: 80%; background: #f28b00; color: #ffffff; border-radius: 40px;margin-top: 50px">保存</button>
  </div>
</template>
<script>
  export default {

    data(){
      return{
        photo_url:"http://file.rzkeji.com/web/recruit/icon/default.png",//个人头像
        nickname: "",//昵称
        realName:"",//真实姓名
        companyName: "",
        companyType_data: [],
        companyType_index:[0],
        companyType_input: ""
      }
    },
    onShow() {
      this.getUserInfo()
      this.getUnitTypeList()
    },
    methods:{
      async getUserInfo(){
        var userToken=wx.getStorageSync('userToken')
        let res=await this.$request.getData('/ucenter/getUserInfo',{user_token:userToken})
        if(res.data.data instanceof Object){
          this.photo_url=res.data.data.user_info.photo_url
          this.nickname=res.data.data.user_info.nickname
          this.realName=res.data.data.user_detail.realname
          this.companyName = res.data.data.user_detail.company_name
          this.companyType_input = res.data.data.user_detail.company_type
        }else if(res.data.level=='error'){
          if(res.data.data=='no_login'){
            this.noLoginFlag=true;
          }else if(res.data.data=='no_binding'){
            this.noBindingFlag=true;
          }
        }
      },
      handlerGobackClick(){
        wx.navigateBack({
          delta: 1
        })
      },
      selectCompany(e) {
        this.companyType_index = e.target.value
        this.companyType_input = this.companyType_data[this.companyType_index]
      },
      saveData() {
        const userToken = wx.getStorageSync('userToken');
        this.$request.postData('/ucenter/setUserDetail',
          {
            nickname:this.nickname,
            realname:this.realName,
            company_name:this.companyName,
            company_type:this.companyType_input,
            user_token: userToken}).then(res =>{
          if(res.data.level=="success")
          {
            this.$currency.showToast("成功",'success',2500)
            setTimeout(function () {
              wx.navigateBack({
                delta: 1
              })
            },800)
          }else{
            this.$currency.showToast(res.data.message,'none',2500)
          }
        })
      },
      async getUnitTypeList() {
        let res=await this.$request.getData('/other/getUnitTypeList',{});
        this.companyType_data = res.data.data;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .person_info{
    .header{
      height: 200px;
      width:100%;
      display:flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
      background: #ffffff;
      margin-bottom: -50px;
      img{
        width:70px;
        height: 70px;
        border-radius: 50%;
        margin-top: 25px;
      }
      div{
        margin:10px 0;
        width:100%;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #000;
        font-size: 16px;
      }
      navigator{
        border:1px solid #eee;
        padding:5px;

      }
    }
  }
  .person_data{
    font-size: 18px;
    .item{
      display: flex;
      justify-content: flex-start;
      margin-bottom: 20px;
      border-bottom: rgba(7, 17, 27, 0.1) solid 1px;
      padding-bottom: 15px;
      label{
        color: #000000;
        margin-left: 10px;
        height: 25px;
        min-width: 100px;
      }
      input{
        margin-left: 20px;
        height: 25px;
      }
    }
    .item:last-child{
      border-bottom: none;
    }
  }
</style>
